{% extends 'base.html' %}

{# 页面标题 #}
{% block title %}
    我的网站
{% endblock %}

{% block nav_blog_active %}active{% endblock %}
{% load staticfiles %}
{% block header_extends %}
    <link rel="stylesheet" type="text/css" href="{% static 'blog.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">
                <div class="panel panel-default">
                    <div class="panel-heading">{% block blog_list_title %}博客列表 {% endblock %}</div>
                    <div class="panel-body">
                        {% for blog in blogs %}
                            <a href="{% url 'blog_detail' blog.pk %}">
                                <h3>{{ blog.title }}</h3>
                            </a>
                            <p>{{ blog.content|truncatechars:30 }}</p>
                            {% empty %}
                            <p>----暂无内容------</p>
                            {% endfor %}
                    </div>
                </div>
                <div class="paginator"> 
                    <ul class="pagination">
                        {#下一页#}
                        <li>
                            {% if page_of_blogs.has_previous %}
                                <a href="?page={{ page_of_blogs.Previous_page_number }}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                          </a>
                            {% else %}
                                <span aria-hidden="true">&laquo;</span>
                            {% endif %}
                        </li>
                        {#全部页码#}
                        {% for page_num in page_range %}
                            {% if page_num == page_of_blogs.number %}
                                {# 高亮现实 #}
                                <li class="active"><span>{{ page_num }}</span></li>
                                
                            {%else%}
                                {% if page_num == '...' %}
                                    <li><span>{{ page_num }}</span></li>
                                {% else %}
                                <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
                            
                                {% endif %}
                            {%endif%}
                        
                        {% endfor %}

                        {#上一页#}
                        <li>
                            {% if page_of_blogs.has_previous %}
                                <a href="?page={{ page_of_blogs.next_page_number }}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                            {% else %}
                                <span aria-hidden="true">&raquo;</span>
                            {% endif %}
                        </li>
                    </ul>
                    <p>
                    (一共有{{ page_of_blogs.paginator.count }}篇博客,
                    当前第{{ page_of_blogs.number }}页,共{{ page_of_blogs.paginator.num_pages }}页
                </p>
                </div>
            </div>
            <div class="hidden-xs col-sm-4 col-md-3 col-lg-2">
                <div class="panel panel-default">
                    <div class="panel-heading">博客分类</div>
                    <div class="panel-bogy">
                        <u1 class="blog-types" >
                            {% for blog_type in blogs_count %}
                        <li><a href="{% url 'blogs_with_type'  blog_type.pk %}">{{ blog_type.type_name }}</a></li>
                        {% empty %}
                        <li>暂无分类</li>
                    {% endfor %}
                </u1>
                    </div>
                </div>
            </div>
        </div>
    </div> 
{% endblock %}

